<template>
	<view style="background: #f2f6fc;height: calc(100% - 10rpx);padding: 10rpx 0;">
		<view class="steps">
			<p class="biaoyu">服务流程</p>

			<u-steps current="-1" activeColor="#ff9c24" inactiveColor="#ffffff">
				<u-steps-item title="报修"></u-steps-item>
				<u-steps-item title="接单"></u-steps-item>
				<u-steps-item title="预约"></u-steps-item>
				<u-steps-item title="到达"></u-steps-item>
				<u-steps-item title="维修完成"></u-steps-item>
				<u-steps-item title="评价"></u-steps-item>
			</u-steps>
			<!-- <u-steps current="2">
				<u-steps-item title="在线报单">
					<text class="slot-icon" slot="icon">报</text>
				</u-steps-item>
				<u-steps-item title="预约确认">
					<text class="slot-icon" slot="icon">约</text>
				</u-steps-item>
				<u-steps-item title="服务及验收">
					<text class="slot-icon" slot="icon">验</text>
				</u-steps-item>
			</u-steps> -->
		</view>
		<view class="xuanxiang">
			<view class="">
				<div :class='{pop:type==1?true:false,pops:type!=1?true:false}' @click="selectType(1)">
					<image :mode="item.mode" :src="type==1?icon3:icon4" @error="imageError"></image>
					<span style="font-size: 28rpx;">维修</span>
				</div>
			</view>
		</view>
		<!-- 维修 -->
		<view v-if="type == 1">
			<!-- 必填项 -->
			<view class="ocrForm">
				<u--form labelPosition="left" :model="userInfo" ref="uForm" labelWidth="120" :rules="rules">
					<u-form-item label="产品报修" prop="name" borderBottom ref="item1">
						<view style="display: flex;justify-content: flex-end;" @click="parseQRCode">
							<u-icon name="scan" color="#318bf5" size="24"></u-icon>
							<span style="color: #318bf5;line-height: 40rpx;margin-right: 20rpx;">扫一扫</span>
						</view>
					</u-form-item>
					<u-form-item label="报修单位" prop="area" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<p>{{userInfo.area}}</p>
							<u-icon name="arrow-right" color="#606266" size="18"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="选择单店" prop="shop" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<picker mode="selector" :range="list" :value="list2" @change="confirm1">
								<u-input placeholder="请输入具体报修单位名称" type="text" readonly v-model="userInfo.shop" border="none"
									suffixIcon="arrow-right" />
							</picker>
						</view>
					</u-form-item>
					<u-form-item label="设备名称" prop="equipment" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<p>{{userInfo.equipment}}</p>
							<u-icon name="arrow-right" color="#606266" size="18"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="设备品牌" prop="brand" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<p>{{userInfo.brand}}</p>
							<u-icon name="arrow-right" color="#606266" size="18"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="设备型号" prop="equipNo" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<p>{{userInfo.equipNo}}</p>
							<u-icon name="arrow-right" color="#606266" size="18"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="出场编号" prop="factoryNo" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-input v-model="userInfo.factoryNo" placeholder="在机器的铭牌上可查看" border="none" />
							<!-- <p>{{userInfo.factoryNo}}</p>
							<u-icon name="arrow-right" color="#606266" size="18"></u-icon> -->
						</view>
					</u-form-item>
					<u-form-item label="所属位置" prop="area" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<p>{{userInfo.area}}</p>
							<u-icon name="arrow-right" color="#606266" size="18"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="图片上传" prop="pictureUrl" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="2"
								width="80" height="80" :previewFullImage="true"></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="视频上传" prop="videoUrl" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2" multiple
								:maxCount="1" width="100" height="100" accept="video"></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="问题描述" prop="description" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-textarea v-model="userInfo.description" placeholder="请输入问题描述" border="none" />
						</view>
					</u-form-item>
					<u-form-item label="用户姓名" prop="customerName" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-input v-model="userInfo.customerName" placeholder="请输入姓名" border="none" />
						</view>
					</u-form-item>
					<u-form-item label="手机号" prop="phone" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-input v-model="userInfo.phone" placeholder="请输入手机号" border="none" />
						</view>
					</u-form-item>
					<u-form-item label="选择地区" prop="location" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<picker mode="region" :value="date" @change="confirm2">
								<u-input placeholder="请选择省市区" type="text" readonly v-model="userInfo.location" border="none"
									suffixIcon="arrow-right" />
							</picker>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" prop="address" borderBottom ref="item3">
						<view style="display: flex;color: #333;justify-content: flex-end;">
							<u-textarea v-model="userInfo.address" placeholder="请输入详细地址" border="none" />
							<!-- <p>{{userInfo.area}}</p>
							<u-icon name="arrow-right" color="#aaa" size="18"></u-icon> -->
						</view>
					</u-form-item>
				</u--form>
				<button style="color:#fff;background:#009bee;font-size: 32rpx;" @click="submit">提交</button>
			</view>


			<view style="color: #009bee;text-align: center;margin-top: 20rpx;" @click="open">
				在线客服
			</view>

			<view style="padding: 40rpx;font-size: 24rpx;color:#aaa">
				<text>东邦御厨承诺：为了您的权益，东邦御厨绝不泄露您的隐私，请您放心提交；东邦御厨客服将在提交完成后24小时内联系您！</text>
			</view>

			<u-popup :show="show" mode="center" @close="close" @open="open" :closeable="true">
				<view>
					<image style="height: 280rpx;margin: 20rpx 0;" :mode="item.mode" src="../../static/icon/kefu.jpg"
						@error="imageError"></image>
					<view style="display: flex;justify-content: space-between;">
						<view class="">
							<p style="font-size: 34rpx;">在线客服</p>
							<p style="color: #888;font-size: 26rpx;">工作时间：8:30~20:00</p>
						</view>
						<view style="background: #318bf5;color: #fff;border-radius: 40rpx;padding: 0 20rpx;line-height: 80rpx;">前往咨询
						</view>
					</view>

					<p style="margin: 20rpx 0;">24小时服务热线</p>
					<u-cell-group>
						<u-cell title="客服" @click="clicks">
							<text slot="value" style="color: #318bf5;">400-8899-315</text>
						</u-cell>
						<u-cell title="项目">
							<text slot="value" style="color: #318bf5;">400-8228-228</text>
						</u-cell>
						<u-cell title="管理员">
							<text slot="value" style="color: #318bf5;">400-969-9999</text>
						</u-cell>
					</u-cell-group>
				</view>
			</u-popup>
		</view>
		<toast ref="toast" :icon="true"></toast>
	</view>
</template>

<script>
	import icon from '@/utils/icon.js'
	import {
		dateFormat
	} from '@/utils/utils.js'
	import toast from '@/components/toast.vue'
	export default {
		data() {
			return {
				userInfo: {
					area: '扫码自动带出',
					factoryNo: '',
					equipNo: '扫码自动带出',
					brand: '扫码自动带出',
					equipment: '扫码自动带出',
					shop: '',
					location: '',
					locationCode: '',
					pictureUrl: '',
					orderDate: '',
					videoUrl: ''
				},
				radiovalue1: '',
				icon1: icon.icon1,
				icon2: icon.icon2,
				icon3: icon.icon3,
				icon4: icon.icon4,
				icon5: icon.icon5,
				icon6: icon.icon6,
				icon7: icon.icon7,
				icon8: icon.icon8,
				type: 1,
				more1: false,
				more2: false,
				more3: false,
				more4: false,
				show: false,

				code:'',
				list: [],
				list2: 0,
				date: 0,
				fileList1: [],
				fileList2: [],
				rules: {
					'description': {
						type: 'string',
						required: true,
						message: '扫描二维码带出问题描述',
						trigger: ['blur', 'change']
					},
					'location': {
						type: 'string',
						required: true,
						message: '请选择地区',
						trigger: ['change']
					},
				},
			}
		},
		methods: {
			clicks() {
				this.$refs.toast.showToast()
			},
			/* upload_avatar() {
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: 'http://192.168.1.197:9091' + '/upload/picture',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								floder: 'avatar'
							},
							header: {
								'Content-Type': 'multipart/form-data',
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								//let retData = JSON.parse(uploadFileRes)

								let retData = JSON.parse(uploadFileRes.data);
								console.log('up:', retData);
								const _data = {
									avatar: retData.data.file
								};
								_this.$api.baseInfoSave(_data).then((ret) => {
									if (ret.code == 1) {
										_this.baseInfo.avatar = retData.data.file;
									} else {
										toast(res.msg);
									}
								});
							}
						});
					}
				});
			},
			chooseVideo_1() {
				// console.log(123);
				const _this = this;
				uni.chooseVideo({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: 'http://192.168.1.197:9091' + '/upload/video',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'Content-Type': 'multipart/form-data',
								'token': uni.getStorageSync('token')
							},
							formData: {
								floder: 'avatar'
							},
							success: (uploadFileRes) => {
								//let retData = JSON.parse(uploadFileRes)

								let retData = JSON.parse(uploadFileRes.data);
								// console.log('up:', retData);
								const _data = {
									avatar: retData.data.file
								};
								_this.$api.baseInfoSave(_data).then((ret) => {
									if (ret.code == 1) {
										_this.baseInfo.avatar = retData.data.file;
									} else {
										toast(res.msg);
									}
								});
							}
						});
					}
				});
			}, */
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				// console.log(lists);
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					// console.log(this.fileList1,'fileList1');
					fileListLen++;
				}
			},
			// 删除视频
			deletePic2(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增视频
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadVideoPromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					console.log(this.fileList2, 'fileList2');
					fileListLen++;
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.1.197:9091/upload/picture', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							floder: 'avatar'
						},
						header: {
							'Content-Type': 'multipart/form-data',
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							let obj = JSON.parse(res.data)
							resolve(obj.msg);
						},
						fail(err) {
							console.log(err, 'err');
						}
					});
				});
			},
			//上传视频
			uploadVideoPromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.1.197:9091/upload/video', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							floder: 'avatar'
						},
						header: {
							'Content-Type': 'multipart/form-data',
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							let obj = JSON.parse(res.data)
							resolve(obj.msg);
						},
						fail(err) {
							console.log(err, 'err');
						}
					});
				});
			},
			confirm1(v) {
				// 不刷新的话使用this.$set(this.userInfo, 'shop', this.list[v.detail.value*1]);
				this.userInfo.shop = this.list[v.detail.value * 1];
			},
			confirm2(v) {
				this.userInfo.location = v.detail.value.join(',');
			},
			submit() {
				// this.userInfo.orderDate = dateFormat(new Date())
				this.userInfo.pictureUrl = this.fileList1.map(item => item.url).join(',')
				this.userInfo.videoUrl = this.fileList2.map(item => item.url).join(',')

				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					if (!this.userInfo.equipment || this.userInfo.equipment == '' || this.userInfo.equipment == '扫码自动带出') {
						uni.showToast({
							title: '请扫描报修设备二维码',
							icon: 'none',
							duration: 2000 //持续的时间
						});
						return
					}
					if ((!this.userInfo.pictureUrl || this.userInfo.pictureUrl == '') && (!this.userInfo.videoUrl || this.userInfo
							.videoUrl == '')) {
						uni.showToast({
							title: '请上传图片或视频',
							icon: 'none',
							duration: 2000 //持续的时间
						});
						return
					}
					console.log(this.userInfo);
					this.$newapi.addOrder(this.userInfo).then(res => {
						if (res.code === 200) {
							this.$refs.toast.showToast()
							this.userInfo.factoryNo = ''
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesIndex/order/order?index=0'
								})
							}, 500)
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			selectType(i) {
				this.type = i
			},
			close() {
				this.show = false
			},
			open() {
				this.show = true
			},
			//扫码
			scanCode() {
				let that = this;
				uni.scanCode({
					onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
					scanType: ['qrCode'], // 扫码类型 qrCode二维码
					autoZoom: false, // 是否启用自动放大，默认启用
					success: function(res) {
						console.log(`扫码结果：${JSON.stringify(res,null,2)}`);
						that.parseQRCode(res);
					},
					fail: function(err) {
						console.log(`错误：${err}`);
					},
					complete: function(data) {
						console.log('111！');
					}
				});
			},
			// 解析二维码，处理业务
			parseQRCode(data) {
				uni.vibrateShort(); // 震动提示
				uni.showToast({
					title: '扫码成功'
				}) // 弹出提示
				// BG091890
				// data.result
				this.$newapi.scan({
					id: 'BG091890'
				}).then(res => {
					console.log(res, 'res');
					this.userInfo.area = res.data.area
					this.userInfo.equipNo = res.data.equipNo
					this.userInfo.equipId = res.data.id
					this.userInfo.brand = res.data.brand
					this.userInfo.equipment = res.data.equipMent
					this.userInfo.itemName = res.data.itemName
				})
			},
		},
		components: {
			toast
		},
		onShow() {
			this.code = uni.getStorageSync('WXcode')
		},
		async onReady() {
			//微信登录获取code
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
			    console.log(loginRes,'loginRes');
			    uni.setStorageSync('WXcode',loginRes.code)
			  }
			});
			
			this.userInfo.userId = getApp().globalData.id
			this.userInfo.phone = getApp().globalData.cellphone
			this.userInfo.address = getApp().globalData.customerAddress
			this.userInfo.repairUnit = getApp().globalData.customerName
			this.userInfo.itemNo = getApp().globalData.itemNo
			this.userInfo.itemName = getApp().globalData.itemName
			this.userInfo.shop = getApp().globalData.shop
			this.userInfo.customerName = getApp().globalData.username
			this.userInfo.utype = getApp().globalData.utype
			// this.userInfo.factoryNo = ''
			
			uni.getSetting({ //获取用户授权位置
				success(res) {
					console.log(res, 'resSetting');
					if (res.authSetting['scope.userLocation'] == undefined) {
						uni.authorize({
							scope: 'scope.userLocation',
							success: (res) => {
								uni.getLocation({
									type: 'gcj02',
									success(res) {
										getApp().globalData.latitude = res.latitude
										getApp().globalData.longitude = res.longitude
									}
								})
							}
						})
					} else {
						uni.getLocation({
							type: 'gcj02',
							success(res) {
								console.log(res, 'res');
								getApp().globalData.latitude = res.latitude
								getApp().globalData.longitude = res.longitude
							},
							fail(err) {
								console.log(err, 'err');
							}
						})
					}
				}
			})
			this.userInfo.locationCode = `${getApp().globalData.latitude},${getApp().globalData.longitude}`
			
			this.$refs.uForm.setRules(this.rules)
			// let code = uni.getStorageSync('WXcode')
			await this.$newapi.getOpenId({
				code:this.code
			}).then(res => {
				console.log(res, 'openid');
				if (res.data) {
					this.userInfo.openid = res.data
				} else {
					// let code = uni.getStorageSync('WXcode')
					this.$newapi.getOpenId({
						code:this.code
					}).then(res => {
						if (res.data) {
							this.userInfo.openid = res.data
						}
					})
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	/* ::v-deep .u-steps-item__wrapper--row--dot {
		background: transparent !important;
	}

	::v-deep .u-steps-item__wrapper__dot {
		width: 20rpx !important;
		height: 20rpx !important;
	}
 */
	::v-deep .u-text__value--content,
	::v-deep .u-text__value--main,
	::v-deep .u-text__value {
		color: #fff !important;
	}

	::v-deep .u-steps-item__wrapper__circle__text {
		// color: #111 !important;
		font-size: 28rpx !important;
	}

	::v-deep .u-steps-item__wrapper__circle {
		border-color: #ffffff !important;
		width: 52rpx !important;
		height: 52rpx !important;
		// background-color:transparent !important;
	}

	::v-deep .u-steps-item__wrapper {
		background: transparent !important;
	}

	::v-deep .u-steps-item__line {
		background: #ddd !important;
		width: 50% !important;
		left: 75% !important;
	}

	::v-deep .u-popup__content {
		padding: 30rpx 40rpx 20rpx 40rpx;
		border-radius: 20rpx;
		background: #f0f0f0 !important;
	}

	::v-deep .u-safe-bottom {
		display: none;
	}

	::v-deep .u-radio-group--row {
		justify-content: flex-end;
	}

	::v-deep .u-radio {
		margin-left: 20rpx;
	}

	::v-deep .u-button--info {
		border: none !important;
	}

	::v-deep .u-button {
		justify-content: flex-end !important;
	}

	::v-deep .u-button--plain.u-button--info {
		color: #318bf5 !important;
	}

	::v-deep .u-icon__icon--info {
		color: #318bf5 !important;
	}

	::v-deep .u-form-item__body {
		padding: 30rpx 0 !important;
	}

	::v-deep .u-input__content__field-wrapper__field {
		text-align: right !important;
	}

	::v-deep .u-textarea__field {
		text-align: right !important;
	}

	::v-deep .u-upload__wrap {
		justify-content: flex-end !important;
	}

	.steps {
		background: linear-gradient(to bottom, #0d9eec, #32baf9);
		padding: 30rpx 10rpx;
		border-radius: 20rpx;
		margin: 10rpx 20rpx;

		::v-deep .u-icon__icon {
			font-size: 32rpx !important;
			line-height: 32rpx !important;
			color: #fff !important;
		}
	}

	.biaoyu {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.xuanxiang {
		display: flex;
		justify-content: flex-start;
		margin: 10rpx 20rpx;

		.pops {
			width: 170rpx;
			height: 140rpx;
			position: relative;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background: #e6ecf5;
			box-shadow: 0 0 18rpx #ccc;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			span {
				margin-top: 10rpx;
				color: #aaa;
			}
		}

		.pop {
			width: 170rpx;
			height: 140rpx;
			position: relative;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0 0 18rpx #ccc;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			span {
				margin-top: 10rpx;
			}

			&:before {
				content: '';
				width: 0;
				height: 0;
				border: 9px solid transparent;
				border-top-color: #cccccc;
				position: absolute;
				bottom: -23%;
				left: 40%;
			}

			&:after {
				content: "";
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-top-color: #FFFFFF;
				position: absolute;
				bottom: -20%;
				left: 40%;
			}
		}
	}

	.ocrForm {
		padding: 0 20rpx 20rpx 20rpx;
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.more {
		display: flex;
		justify-content: center;
	}
</style>